<script setup lang="ts">
import {useRouter} from 'vue-router';
// 定义路由的跳转
const router = useRouter();
const navigateTo = (path: string) => {
  router.push(path);
};
</script>

<template>
  <div class="section section9">
    <img class="counselingHead" src="@/assets/images/counselingHead.png" alt="数智增效，如此简单">
    <div class="counselingInputContain1">
        <span class="counselingInputText1">
          姓名
        </span>
      <input class="counselingInput1" type="text" maxlength="20">

    </div>
    <div class="counselingInputContain2">
        <span class="counselingInputText2">
          电话
        </span>
      <input class="counselingInput2" type="tel" maxlength="11" pattern="[0-9]*">

    </div>
    <div class="counselingInputContain3">
        <span class="counselingInputText3">
          邮箱
        </span>
      <input class="counselingInput3" type="email" maxlength="50">

    </div>
    <div class="counselingInputContain4">
        <span class="counselingInputText4">
          咨询内容
        </span>
      <input class="counselingInput4" type="text" maxlength="200">

    </div>
    <img class="counselingButton" src="@/assets/images/counselingButton.png" alt="counselingButton">
  </div>
  <div class="section section10">
    <img class="whiteLogo" src="@/assets/logo/whiteLogo.png" alt="logo">
    <ul class="navigateBottom">
      <li @click="navigateTo('/zhiyouyun/aboutMe')">关于知优</li>
      <li @click="navigateTo('/zhiyouyun/produceService/zyszjl')">产品服务</li>
      <!--      <li @click="navigateTo('/zhiyouyun/aboutMe')">致优专栏</li>-->
      <li @click="navigateTo('/zhiyouyun/contactUs')">联系我们</li>
    </ul>
    <span class="bottomText1">联系我们</span>
    <img src="@/assets/images/地址.svg" class="contactAddress" alt="contactAddress">
    <img src="@/assets/images/电话 拨打电话.svg" class="contactPhone" alt="contactPhone">
    <img src="@/assets/images/邮箱.svg" class="contactEmail" alt="contactEmail">
    <span class="bottomText2">浙江省杭州市滨江区慧港科技园1幢3楼305-307</span>
    <span class="bottomText3">18057177208</span>
    <span class="bottomText4">1422285411@qq.com</span>
    <div class="bottomLine"></div>
    <div class="policeText">
      <span class="bottomText5">
      Copyright © 2024-2025 致优知识产权有限公司 版权所有 法律声明</span>

      <span class="bottomText7">
      © 2024 浙ICP备2024085098号
      </span>
      <img src="@/assets/police.png" alt="公安图标"/>
      <span class="bottomText6">
        浙公网安备33010802013887号
      </span>
      <span class="bottomText8">
        © 2025 浙ICP备2025167548号
      </span><span class="bottomText8">
        © 2025 浙ICP备2025167548号-2
      </span>

    </div>


  </div>
</template>

<style scoped>
.section9 {
  width: 100%;
  height: 380px;
  background-color: #101010;
  background-image: url('@/assets/bk/section9.png'); /* 替换为实际背景图片路径 */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}



.counselingHead {
  position: absolute;
  top: 63px; /* 距离父容器顶部距离 */
  left: 50%; /* 水平居中 */
  transform: translateX(-50%); /* 精确居中 */
}


.counselingButton {
  position: absolute;
  top: 247px; /* 距离父容器顶部距离 */
  left: 50%; /* 水平居中 */
  transform: translateX(-50%); /* 精确居中 */
}

.counselingInputContain1 {
  position: absolute;
  width: 180px;
  height: 80px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.17) 100%);
  top: 143px;
  left: 360px;
  border-radius: 12px;
}

.counselingInputText1 {
  position: absolute;
  left: 12px;
  top: 20px;
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 28px;
  color: #FFFFFF;
}

.counselingInput1 {
  position: absolute;
  height: 28px;
  width: 100px;
  background-color: transparent;
  border: 1px solid transparent;
  /* border: 1px solid #FFFFFF; */
  color: #FFFFFF;
  top: 23px;
  left: 70px;
  font-size: 24px;
  /* padding: 10px; */
}

.counselingInput1:focus {
  border-color: transparent;
  outline: none; /* 移除默认的focus轮廓 */
}

.counselingInputContain2 {
  position: absolute;
  width: 224px;
  height: 80px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.17) 100%);
  top: 143px;
  left: 552px;
  border-radius: 12px;
}

.counselingInputText2 {
  position: absolute;
  left: 12px;
  top: 20px;
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 28px;
  color: #FFFFFF;
}

.counselingInput2 {
  position: absolute;
  height: 28px;
  width: 145px;
  background-color: transparent;
  border: 1px solid transparent;
  /* border: 1px solid #FFFFFF; */
  color: #FFFFFF;
  top: 23px;
  left: 70px;
  font-size: 24px;
  /* padding: 10px; */
}

.counselingInput2:focus {
  border-color: transparent;
  outline: none; /* 移除默认的focus轮廓 */
}

.counselingInputContain3 {
  position: absolute;
  width: 350px;
  height: 80px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.17) 100%);
  top: 143px;
  left: 788px;
  border-radius: 12px;
}

.counselingInputText3 {
  position: absolute;
  left: 12px;
  top: 20px;
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 28px;
  color: #FFFFFF;
}

.counselingInput3 {
  position: absolute;
  height: 28px;
  width: 270px;
  background-color: transparent;
  border: 1px solid transparent;
  /* border: 1px solid #FFFFFF; */
  color: #FFFFFF;
  top: 23px;
  left: 70px;
  font-size: 24px;
  /* padding: 10px; */
}

.counselingInput3:focus {
  border-color: transparent;
  outline: none; /* 移除默认的focus轮廓 */
}

.counselingInputContain4 {
  position: absolute;
  width: 410px;
  height: 80px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.17) 100%);
  top: 143px;
  left: 1150px;
  border-radius: 12px;
}

.counselingInputText4 {
  position: absolute;
  left: 12px;
  top: 20px;
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 28px;
  color: #FFFFFF;
}

.counselingInput4 {
  position: absolute;
  height: 28px;
  width: 270px;
  background-color: transparent;
  border: 1px solid transparent;
  /* border: 1px solid #FFFFFF; */
  color: #FFFFFF;
  top: 23px;
  left: 128px;
  font-size: 24px;
  /* padding: 10px; */
}

.counselingInput4:focus {
  border-color: transparent;
  outline: none; /* 移除默认的focus轮廓 */
}


.section10 {
  position: relative;
  width: 100%;
  height: 580px;
  background-color: #101010;
  background-image: url('@/assets/bk/section10.png'); /* 替换为实际背景图片路径 */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

}

.whiteLogo {
  position: absolute;
  top: 80px;
  left: 360px;

  width: 228px;
  height: 72px;

}


.navigateBottom {
  position: absolute;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: 40px;
  list-style: none;
  top: 80px;
  left: 1020px;
  /* padding: 0; */
  /* margin-top: 40px; */
}

.navigateBottom li {
  color: #FFFFFF;
  font-size: 27.5px;
  line-height: 39px;
  width: 111px;
  height: 40px;
  font-style: normal;
  text-align: left;
}

.navigateBottom li:hover {
  color: #FF6600;
}



.bottomText1 {
  position: absolute;
  top: 192px;
  left: 360px;
  font-family: "Microsoft YaHei", sans-serif;
  letter-spacing: 2px;
  font-size: 27.5px;
  line-height: 40px;
  color: #FFFFFF;
}

.contactAddress {
  position: absolute;
  top: 240px;
  left: 370px;
  width: 35px;
}

.bottomText2 {
  position: absolute;
  top: 242.5px;
  left: 420px;
  font-family: "Microsoft YaHei", sans-serif;
  letter-spacing: 2px;
  font-size: 22px;
  line-height: 30px;
  color: #FFFFFF;
}

.contactPhone {
  position: absolute;
  top: 300px;
  left: 370px;
  width: 35px;
}

.bottomText3 {
  position: absolute;
  top: 302.5px;
  left: 420px;
  font-family: "Microsoft YaHei", sans-serif;
  letter-spacing: 2px;
  font-size: 21.5px;
  line-height: 30px;
  color: #FFFFFF;
}

.contactEmail {
  position: absolute;
  top: 360px;
  left: 370px;
  width: 35px;
}

.bottomText4 {
  position: absolute;
  top: 362.5px;
  left: 420px;
  font-family: "Microsoft YaHei", sans-serif;
  letter-spacing: 2px;
  font-size: 21.5px;
  line-height: 30px;
  color: #FFFFFF;
}

.bottomLine {
  position: absolute;
  width: 1372px;
  height: 4px;
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0.2);
  top: 460px;
  left: 274px;
}
.policeText{

  position: absolute;
  top: 497px;
  left: 290px;
  width: 70%;
  height: 80px;

  span{
    font-family: "Microsoft YaHei", sans-serif;
    font-size: 20.5px;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.6);
    margin-right: 30px;
    line-height: 32px;
  }

  img{
    width: 25px;
    height: 27px;
    margin-right: 5px;

  }

  .bottomText6{
    margin-top: 2px;
  }
  .bottomText5{
    margin-right: 20px;
  }
  .bottomText7{
    margin-right: 220px;
    margin-left: 80px;
  }
}



</style>